<template>
	<div class="ma">

		<div class="ma-top">
			活动管理
			<div class="step" :class="'step' + step">{{ stepText[step] }}</div>
		</div>
		<div class="ma-con">


			<el-form label-width="120px">
				<el-form-item label="活动标题：">
					<span>{{ myActivityData.title }}</span>
				</el-form-item>
				<el-form-item label="活动起始时间:">
					<span>{{ myActivityData.beginTime }}--{{ myActivityData.endTime }}</span>
				</el-form-item>
				<el-form-item label="活动培训材料：">
					<el-button @click="downFile(myActivityData.materialInfo[0].specs_name, '活动培训材料')">点击下载</el-button>
				</el-form-item>
				<el-form-item label="活动反馈表单：">
					<el-button class="mr10" @click="downFile(myActivityData.feedbackMaterial, '活动反馈表单')">点击下载</el-button>
					<el-upload ref="upload" class="upload-demo" action="https://api.bandai-card.com.cn/act-upload"
						:headers="headers" :limit="1" :on-success="handleSuccess" :on-error="handleError" :on-exceed="handleExceed"
						:data="{ id: myActivityData.id }" :auto-upload="false">
						<template #trigger>
							<el-button class="mr10" type="primary">选择文件</el-button>
						</template>
						<el-button class="ml-3 mr20" type="success" @click="submitUpload">
							点击上传
						</el-button>

					</el-upload>
					<el-text v-if="isOver" type="danger">活动申请已结束</el-text>
				</el-form-item>
				<!-- <el-form-item label="申请资格：">
								<el-button @click="downFile(myActivityData.materialInfo[0].specs_name)">点击下载</el-button>
							</el-form-item> -->
				<el-form-item label="活动申报时间:">
					<div v-for="(item, index) in timeValue" :key="item" class="delcon">
						<div class="block">
							<el-button type="success">第{{ Number(index + 1) }}场</el-button>
						</div>
						<div class="block">
							<el-date-picker @change="dataChange(index)" :disabled="forbiddenChange" v-model="item[0]"
								:clearable="false" type="date" format="YYYY-MM-DD" :disabledDate="disabledDate" placeholder="选择日期"
								:size="size" />
						</div>
						<el-time-picker @change="timeChange(index)" :disabledHours="disabledHours" :disabled="forbiddenChange"
							v-model="item[1]" format="HH:mm" is-range range-separator="到" start-placeholder="开始时间"
							end-placeholder="结束时间" />
						<el-button type="danger" @click="deleteTime(index)" class="delbtn" v-if="!forbiddenChange">删除</el-button>
					</div>
				</el-form-item>
				<el-form-item label="修改申请时间：">
					<el-button @click="applyUpdate()">{{ forbiddenChange ? "修改活动时间" : "确定修改" }}</el-button>
				</el-form-item>
				<el-form-item label="物流信息：">
					<el-button v-if="myActivityData.express_no !== ''" @click="checkLogistics()">查看物流</el-button>
					<el-button v-else>暂无物流信息</el-button>
				</el-form-item>
			</el-form>

			<div class="ma-warning">
				注：活动申请成功后请留意物料物流信息以免错过 <br>
				活动时间。 <b>*活动结束后请务必上传提交反馈表单。</b>
			</div>

		</div>

		<div class="ma-win" v-show="showWin">

			<div class="logistical">
				<div class="close" @click="showWin = false">
					<ele-Close />
				</div>
				<div class="number">快递单号：{{ myActivityData.express_company }}-{{ myActivityData.express_no }}

				</div>
				<div class="ul">
					<div class="li" v-for="item in logisticsData" :key="item.id">
						<div class="s">{{ item.status }}</div>
						<div class="c">
							<div class="t">{{ item.ftime }}</div>
							<p>{{ item.context }}</p>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

</template>


<script setup name="mydetail">
import { ref } from 'vue'
import { useActivityApi } from '/@/api/activity';
import { ElMessage } from 'element-plus';
import { downFile } from '/@/utils/globalMethods';
import { Session } from '/@/utils/storage';
const isOver = ref(false)
const upload = ref()

const handleExceed = (files) => {
	upload.value.clearFiles()
	const file = files[0];
	file.uid = genFileId()
	upload.value.handleStart(file)
}
const headers = ref({ Authorization: Session.get('token') })
const submitUpload = () => {
	// alert('提交上传文件')
	upload.value.submit()
}
function handleError() {
	alert('上传失败，请重新上传')
}
function handleSuccess() {
	isOver.value = true;
	alert('上传成功');
}
// import { userStore } from '../store/index'
// const userSData = userStore();

const props = defineProps(['data']);
const myActivityData = ref(props.data);
const logisticsData = ref([]);
const step = ref(myActivityData.value.status)
const stepText = ref({
	0: '审核中',//未审核
	1: '审核通过 进行中',
	2: '已拒绝',
	3: '活动完成',
	4: '已经反馈',
	5: '取消中',
	6: '已取消',
})
const showWin = ref(false)
const forbiddenChange = ref(true)
async function checkLogistics() {
	const res = await useActivityApi().logistics({ id: myActivityData.value.actId });
	if (res) {
		logisticsData.value = res.data;
		showWin.value = true;
		// ElMessage(res.msg)
	}

}
function getTodayYMD() {
	var nowData = new Date();
	return nowData.getFullYear() + '-' + (Number(nowData.getMonth()) + 1) + '-' + nowData.getDate() + ' '
}
function deleteTime(i) {
	if (timeValue.value.length === 1) {
		alert('至少有一条申报申报时间')
	} else {
		let list = [...timeValue.value];
		list.splice(i, 1)
		timeValue.value = list
	}

}
function getYMD(t) {
	var nowData = new Date(t);
	return nowData.getFullYear() + '-' + (Number(nowData.getMonth()) + 1) + '-' + nowData.getDate() + ' '
}
function getHMS(t) {
	var nowData = new Date(t);
	return nowData.getHours() + ':' + nowData.getMinutes() + ':' + nowData.getSeconds()
}
const timeValue = ref([['', '']])
const tmpTime = [];

myActivityData.value.actTime.map(v => {
	const startEnd = v.beginTime.indexOf(' ');
	const endEnd = v.endTime.indexOf(' ');
	tmpTime.push([v.beginTime.slice(0, startEnd) + " 00:00:00", [getTodayYMD() + ' ' + v.beginTime.slice(startEnd + 1), getTodayYMD() + ' ' + v.endTime.slice(endEnd + 1)]])
})
timeValue.value = tmpTime;
function disabledDate(time) { // 禁用今天之前的时间
	return !((time.getTime() + 24 * 3600 * 1000 > new Date(myActivityData.value.beginTime)) && (time.getTime() + 24 * 3600 * 1000 > new Date()) && (time.getTime() < new Date(myActivityData.value.endTime)))
}
function disabledHours() {
	return [0, 1, 2, 3, 4, 5, 6, 7, 22, 23, 23]
}


function dataChange(i) {
	timeValue.value[i][1] = []
}
function timeChange(i, e) {
	const v = timeValue.value[i];
	const beginTime = getYMD(v[0]) + getHMS(v[1][0]);
	const endTime = getYMD(v[0]) + getHMS(v[1][1]);
	if (new Date(beginTime) <= new Date()) {
		timeValue.value[i][1] = []
		alert('活动申请时间必须晚于当前时间');
	} else if (new Date(beginTime) <= new Date(activityData.value.beginTime)) {
		timeValue.value[i][1] = []
		alert('活动申请时间必须晚于活动开始时间');
	} else if (new Date(endTime) >= new Date(activityData.value.endTime)) {
		timeValue.value[i][1] = []
		alert('活动申请时间必须早于活动结束时间');
	}
}
async function applyUpdate() {
	if (forbiddenChange.value) {
		forbiddenChange.value = false;
		return false;
	}
	let tmpTime = [];
	let canSubmit = true;
	timeValue.value.map((v) => {
		if (v[0] && v[1]) {
			if (!(v[1][0] && v[1][1])) {
				canSubmit = false;
			}
			tmpTime.push({
				beginTime: getYMD(v[0]) + getHMS(v[1][0]),
				endTime: getYMD(v[0]) + getHMS(v[1][1]),
			})
		}

	})
	if (tmpTime.length === 0) {
		ElMessage('请选择申请时间');
		return false;
	}
	if (!canSubmit) {
		ElMessage('请选择申请的具体时间');
		return false;
	}
	const res = await useActivityApi().applyUpdate({ applyId: myActivityData.value.id, actTime: tmpTime });
	if (res) {
		ElMessage(res.data)
	}
}

</script>

<style scoped lang="scss">
.upload-demo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.delcon {
	vertical-align: middle;
	display: flex;
	margin-bottom: 20px;
	max-width: 100%;
	font-size: 0;
}

.ma {
	border-radius: 5px;
	background: #ffffff;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	padding: 20px 20px;
	position: absolute;
	min-width: 360px;

	&-top {
		height: 70px;
		line-height: 60px;
		display: flex;
		font-size: 24px;
		color: #333333;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #333333;
		margin-bottom: 25px;

		.step {
			padding: 0 18px;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			color: #ffffff;
			border-radius: 3px;

			&0 {
				background: #909399;
			}

			&1 {
				background: #409eff;
			}

			&2 {
				background: #f56c6c;
			}

			&3 {
				background: #67c23a;
			}

			&4 {
				background: #e6a23c;
			}

			&5 {
				background: #f56c6c;
			}

			&6 {
				background: #f56c6c;
			}
		}
	}

	&-con {
		height: calc(100% - 100px);
		overflow: auto;

		.col-con {
			display: flex;
			margin-bottom: 20px;
			align-items: center;
			justify-content: flex-start;
		}

		.title {
			width: 120px;
			line-height: 30px;
			font-size: 16px;
			color: #333333;
		}

		.content {
			width: calc(100% - 130px);
			height: 30px;
			line-height: 30px;
			color: #666666;
			background: rgb(136, 136, 136);
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 10px;
		}

		.btn-con {
			width: calc(100% - 130px);
			height: 30px;
			line-height: 30px;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.btn {
				margin-right: 5px;
				box-sizing: border-box;
				line-height: 28px;
				border: 1px solid #666;
				color: #666;
				font-size: 14px;
				padding: 0 10px;
				cursor: pointer;
			}

			.no {
				border: 0;
				color: #ccc;
				padding: 0;
			}
		}

		.content-text {
			width: calc(100% - 130px);
			height: 120px;
			line-height: 30px;
			color: #666666;
			background: rgb(136, 136, 136);
			overflow: hidden;
			box-sizing: border-box;
			padding: 10px;
		}
	}

	&-btns {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: wrap;

		.btn {
			width: 121px;
			height: 98px;
			font-size: 12px;
			font-weight: 400;
			color: rgb(251, 251, 251);
			background: rgb(64, 149, 229);
			margin: 0 32px 35px;
			line-height: 98px;
			text-align: center;
		}
	}

	&-warning {
		width: 320px;
		margin: 10px auto 20px;
		font-size: 14px;
		color: rgb(120, 120, 120);
		line-height: 24px;

		b {
			font-size: 14px;
			color: rgba(189, 49, 36, 1);
			font-weight: normal;
		}
	}



	&-win {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 10;
		left: 0;
		top: 0;

		.close {
			position: absolute;
			width: 20px;
			height: 20px;
			right: 10px;
			top: 10px;
			cursor: pointer;
		}

		.logistical {
			width: 100%;
			padding: 10px 25px 0;
			height: calc(100% - 160px);
			overflow: hidden;
			position: relative;
			background: #ffffff;
			margin: 0 auto;
			z-index: 2;

			.number {
				height: 50px;
				line-height: 45px;
				font-size: 16px;
				color: #333333;
				width: 100%;
				border-bottom: 1PX solid rgba(169, 168, 168, 0.25);
				margin-bottom: 25px;
			}

			.ul {

				width: 100%;
				overflow-y: auto;
				height: calc(100% - 90px);

			}

			.li {
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;

				.s {
					width: 70px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 14px;
					color: #aaa9a9;

					&::after {
						content: "";
						width: 10px;
						height: 9px;
						background: #032d84;
						transform: rotate(45deg);

					}

				}

				.c {
					width: calc(100% - 100px);
					font-size: 18px;
					line-height: 22px;
					color: #aaa9a9;
					padding-left: 18px;
					position: relative;
					box-sizing: border-box;
					padding-bottom: 30px;

					&::before {
						content: "";
						position: absolute;
						left: -6px;
						top: 0;
						width: 1px;
						height: 100%;
						border-right: 1px dashed #032d84;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 576px) {
	.delcon {
		flex-direction: column;
	}

	.delbtn {
		margin-left: 0;
		margin-top: 10px;
		max-width: 70px;
	}
}
</style>